<!-- ---
layout: default
title: 控件
slug: controls
lead: "基本控件设计."
base_url: "./"
--- -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZUI，一个简单灵活的前端框架。">
    <meta name="author" content="Zentao">

    <title>ZUI - 开源HTML5跨屏框架</title>

    <link href="css/zui.min.css" rel="stylesheet">
    <link href="css/doc.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="../assets/html5shiv.js"></script>
    <script src="../assets/respond.js"></script>
    <![endif]-->
  </head>
  <body class="doc-controls">
    <header data-tab="controls">
    </header>
    <div id="main">
      <div class="page-header">
        <h1>控件</h1>
      </div>

      <section id="icons">
        <div class="page-header">
          <h2>图标 </h2>
        </div>
        <p>图标能在视觉上简洁有效的指引用户操作。特殊情况下，使用图标能够代替文本。</p>
        <h3>何时使用图标？</h3>
        <p>同一个应用程序中的图标应该具有一致的外观及用户行为响应，应该将整个图标集作为用户界面中的重要部分。一般图标用于如下情况：</p>
        <ul>
          <li>用于应用程序头部，便于用户识别正在使用的应用；</li>
          <li>用于按钮，对于一些常用的按钮可以使用图标取代按钮中的文本，使得界面更加简洁；</li>
          <li>用于提示消息，图标能指明消息类型，便于用户无需仔细阅读消息内容就可以迅速做出决策；</li>
          <li>用于一些简单但重要列表，在列表项目前面加上合适的图标能大大增强列表识别程度；</li>
          <li>等同与标签，图标能简明表达项目或信息类型。</li>
        </ul>
        <h3>使用图标字体</h3>
        <p>在图标字体没有普及之前，图标通常是通过图片来展示，如今图标字体是展示图标的更好方式。使用图标字体能使用CSS对图标进行调整，例如定义大小、颜色及特殊效果。在ZUI中将使用图标字体作为系统图标集方案。采用开源web图标字体<a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a>是一个不错的选择。</p>
        <p>在Font Awesome 3.2.1中提供了361个图标。ZUI基于FontAwesome 3.2.1定制，去除了一些不常用的图标，并加入了一些适合中国使用的图标。</p>
        <p>在ZUI中提供了290个图标：</p>
        <div class="icons example">
          <ul class='clearfix'>
            <li><i class="icon-music"></i> music</li>
            <li><i class="icon-search"></i> search</li>
            <li><i class="icon-envelope"></i> envelope</li>
            <li><i class="icon-heart"></i> heart</li>
            <li><i class="icon-star"></i> star</li>
            <li><i class="icon-star-empty"></i> star-empty</li>
            <li><i class="icon-user"></i> user</li>
            <li><i class="icon-film"></i> film</li>
            <li><i class="icon-th-large"></i> th-large</li>
            <li><i class="icon-th"></i> th</li>
            <li><i class="icon-th-list"></i> th-list</li>
            <li><i class="icon-ok"></i> ok</li>
            <li><i class="icon-remove"></i> remove</li>
            <li><i class="icon-zoom-in"></i> zoom-in</li>
            <li><i class="icon-zoom-out"></i> zoom-out</li>
            <li><i class="icon-off"></i> off</li>
            <li><i class="icon-cog"></i> cog</li>
            <li><i class="icon-trash"></i> trash</li>
            <li><i class="icon-home"></i> home</li>
            <li><i class="icon-file"></i> file</li>
            <li><i class="icon-time"></i> time</li>
            <li><i class="icon-download-alt"></i> download-alt</li>
            <li><i class="icon-download"></i> download</li>
            <li><i class="icon-upload"></i> upload</li>
            <li><i class="icon-inbox"></i> inbox</li>
            <li><i class="icon-play-circle"></i> play-circle</li>
            <li><i class="icon-repeat"></i> repeat</li>
            <li><i class="icon-refresh"></i> refresh</li>
            <li><i class="icon-list-alt"></i> list-alt</li>
            <li><i class="icon-lock"></i> lock</li>
            <li><i class="icon-flag"></i> flag</li>
            <li><i class="icon-headphones"></i> headphones</li>
            <li><i class="icon-volume-off"></i> volume-off</li>
            <li><i class="icon-volume-up"></i> volume-up</li>
            <li><i class="icon-qrcode"></i> qrcode</li>
            <li><i class="icon-barcode"></i> barcode</li>
            <li><i class="icon-tag"></i> tag</li>
            <li><i class="icon-tags"></i> tags</li>
            <li><i class="icon-book"></i> book</li>
            <li><i class="icon-bookmark"></i> bookmark</li>
            <li><i class="icon-print"></i> print</li>
            <li><i class="icon-camera"></i> camera</li>
            <li><i class="icon-font"></i> font</li>
            <li><i class="icon-bold"></i> bold</li>
            <li><i class="icon-align-justify"></i> align-justify</li>
            <li><i class="icon-list"></i> list</li>
            <li><i class="icon-picture"></i> picture</li>
            <li><i class="icon-pencil"></i> pencil</li>
            <li><i class="icon-map-marker"></i> map-marker</li>
            <li><i class="icon-adjust"></i> adjust</li>
            <li><i class="icon-tint"></i> tint</li>
            <li><i class="icon-edit"></i> edit</li>
            <li><i class="icon-share"></i> share</li>
            <li><i class="icon-check"></i> check</li>
            <li><i class="icon-move"></i> move</li>
            <li><i class="icon-step-backward"></i> step-backward</li>
            <li><i class="icon-fast-backward"></i> fast-backward</li>
            <li><i class="icon-backward"></i> backward</li>
            <li><i class="icon-play"></i> play</li>
            <li><i class="icon-pause"></i> pause</li>
            <li><i class="icon-stop"></i> stop</li>
            <li><i class="icon-forward"></i> forward</li>
            <li><i class="icon-fast-forward"></i> fast-forward</li>
            <li><i class="icon-step-forward"></i> step-forward</li>
            <li><i class="icon-eject"></i> eject</li>
            <li><i class="icon-chevron-left"></i> chevron-left</li>
            <li><i class="icon-chevron-right"></i> chevron-right</li>
            <li><i class="icon-plus-sign"></i> plus-sign</li>
            <li><i class="icon-minus-sign"></i> minus-sign</li>
            <li><i class="icon-remove-sign"></i> remove-sign</li>
            <li><i class="icon-ok-sign"></i> ok-sign</li>
            <li><i class="icon-question-sign"></i> question-sign</li>
            <li><i class="icon-info-sign"></i> info-sign</li>
            <li><i class="icon-remove-circle"></i> remove-circle</li>
            <li><i class="icon-ok-circle"></i> ok-circle</li>
            <li><i class="icon-ban-circle"></i> ban-circle</li>
            <li><i class="icon-arrow-left"></i> arrow-left</li>
            <li><i class="icon-arrow-right"></i> arrow-right</li>
            <li><i class="icon-arrow-up"></i> arrow-up</li>
            <li><i class="icon-arrow-down"></i> arrow-down</li>
            <li><i class="icon-share-alt"></i> share-alt</li>
            <li><i class="icon-resize-full"></i> resize-full</li>
            <li><i class="icon-resize-small"></i> resize-small</li>
            <li><i class="icon-plus"></i> plus</li>
            <li><i class="icon-minus"></i> minus</li>
            <li><i class="icon-asterisk"></i> asterisk</li>
            <li><i class="icon-exclamation-sign"></i> exclamation-sign</li>
            <li><i class="icon-gift"></i> gift</li>
            <li><i class="icon-leaf"></i> leaf</li>
            <li><i class="icon-eye-open"></i> eye-open</li>
            <li><i class="icon-eye-close"></i> eye-close</li>
            <li><i class="icon-warning-sign"></i> warning-sign</li>
            <li><i class="icon-plane"></i> plane</li>
            <li><i class="icon-calendar"></i> calendar</li>
            <li><i class="icon-random"></i> random</li>
            <li><i class="icon-comment"></i> comment</li>
            <li><i class="icon-chevron-up"></i> chevron-up</li>
            <li><i class="icon-chevron-down"></i> chevron-down</li>
            <li><i class="icon-shopping-cart"></i> shopping-cart</li>
            <li><i class="icon-folder-close"></i> folder-close</li>
            <li><i class="icon-folder-open"></i> folder-open</li>
            <li><i class="icon-resize-vertical"></i> resize-vertical</li>
            <li><i class="icon-resize-horizontal"></i> resize-horizontal</li>
            <li><i class="icon-bar-chart"></i> bar-chart</li>
            <li><i class="icon-camera-retro"></i> camera-retro</li>
            <li><i class="icon-key"></i> key</li>
            <li><i class="icon-cogs"></i> cogs</li>
            <li><i class="icon-comments"></i> comments</li>
            <li><i class="icon-thumbs-up"></i> thumbs-up</li>
            <li><i class="icon-thumbs-down"></i> thumbs-down</li>
            <li><i class="icon-star-half"></i> star-half</li>
            <li><i class="icon-heart-empty"></i> heart-empty</li>
            <li><i class="icon-signout"></i> signout</li>
            <li><i class="icon-pushpin"></i> pushpin</li>
            <li><i class="icon-external-link"></i> external-link</li>
            <li><i class="icon-signin"></i> signin</li>
            <li><i class="icon-trophy"></i> trophy</li>
            <li><i class="icon-upload-alt"></i> upload-alt</li>
            <li><i class="icon-lemon"></i> lemon</li>
            <li><i class="icon-phone"></i> phone</li>
            <li><i class="icon-check-empty"></i> check-empty</li>
            <li><i class="icon-bookmark-empty"></i> bookmark-empty</li>
            <li><i class="icon-phone-sign"></i> phone-sign</li>
            <li><i class="icon-credit"></i> credit</li>
            <li><i class="icon-rss"></i> rss</li>
            <li><i class="icon-hdd"></i> hdd</li>
            <li><i class="icon-bullhorn"></i> bullhorn</li>
            <li><i class="icon-bell"></i> bell</li>
            <li><i class="icon-certificate"></i> certificate</li>
            <li><i class="icon-hand-right"></i> hand-right</li>
            <li><i class="icon-hand-left"></i> hand-left</li>
            <li><i class="icon-hand-up"></i> hand-up</li>
            <li><i class="icon-hand-down"></i> hand-down</li>
            <li><i class="icon-circle-arrow-left"></i> circle-arrow-left</li>
            <li><i class="icon-circle-arrow-right"></i> circle-arrow-right</li>
            <li><i class="icon-circle-arrow-up"></i> circle-arrow-up</li>
            <li><i class="icon-circle-arrow-down"></i> circle-arrow-down</li>
            <li><i class="icon-globe"></i> globe</li>
            <li><i class="icon-wrench"></i> wrench</li>
            <li><i class="icon-tasks"></i> tasks</li>
            <li><i class="icon-filter"></i> filter</li>
            <li><i class="icon-fullscreen"></i> fullscreen</li>
            <li><i class="icon-group"></i> group</li>
            <li><i class="icon-link"></i> link</li>
            <li><i class="icon-cloud"></i> cloud</li>
            <li><i class="icon-beaker"></i> beaker</li>
            <li><i class="icon-cut"></i> cut</li>
            <li><i class="icon-copy"></i> copy</li>
            <li><i class="icon-paper-clip"></i> paper-clip</li>
            <li><i class="icon-save"></i> save</li>
            <li><i class="icon-sign-blank"></i> sign-blank</li>
            <li><i class="icon-reorder"></i> reorder</li>
            <li><i class="icon-list-ul"></i> list-ul</li>
            <li><i class="icon-list-ol"></i> list-ol</li>
            <li><i class="icon-table"></i> table</li>
            <li><i class="icon-magic"></i> magic</li>
            <li><i class="icon-caret-down"></i> caret-down</li>
            <li><i class="icon-caret-up"></i> caret-up</li>
            <li><i class="icon-caret-left"></i> caret-left</li>
            <li><i class="icon-caret-right"></i> caret-right</li>
            <li><i class="icon-columns"></i> columns</li>
            <li><i class="icon-sort"></i> sort</li>
            <li><i class="icon-sort-down"></i> sort-down</li>
            <li><i class="icon-sort-up"></i> sort-up</li>
            <li><i class="icon-envelope-alt"></i> envelope-alt</li>
            <li><i class="icon-undo"></i> undo</li>
            <li><i class="icon-dashboard"></i> dashboard</li>
            <li><i class="icon-comment-alt"></i> comment-alt</li>
            <li><i class="icon-comments-alt"></i> comments-alt</li>
            <li><i class="icon-bolt"></i> bolt</li>
            <li><i class="icon-sitemap"></i> sitemap</li>
            <li><i class="icon-umbrella"></i> umbrella</li>
            <li><i class="icon-paste"></i> paste</li>
            <li><i class="icon-lightbulb"></i> lightbulb</li>
            <li><i class="icon-exchange"></i> exchange</li>
            <li><i class="icon-cloud-download"></i> cloud-download</li>
            <li><i class="icon-cloud-upload"></i> cloud-upload</li>
            <li><i class="icon-bell-alt"></i> bell-alt</li>
            <li><i class="icon-coffee"></i> coffee</li>
            <li><i class="icon-file-alt"></i> file-alt</li>
            <li><i class="icon-building"></i> building</li>
            <li><i class="icon-double-angle-left"></i> double-angle-left</li>
            <li><i class="icon-double-angle-right"></i> double-angle-right</li>
            <li><i class="icon-double-angle-up"></i> double-angle-up</li>
            <li><i class="icon-double-angle-down"></i> double-angle-down</li>
            <li><i class="icon-angle-left"></i> angle-left</li>
            <li><i class="icon-angle-right"></i> angle-right</li>
            <li><i class="icon-angle-up"></i> angle-up</li>
            <li><i class="icon-angle-down"></i> angle-down</li>
            <li><i class="icon-desktop"></i> desktop</li>
            <li><i class="icon-laptop"></i> laptop</li>
            <li><i class="icon-tablet"></i> tablet</li>
            <li><i class="icon-mobile"></i> mobile</li>
            <li><i class="icon-circle-blank"></i> circle-blank</li>
            <li><i class="icon-quote-left"></i> quote-left</li>
            <li><i class="icon-quote-right"></i> quote-right</li>
            <li><i class="icon-spinner"></i> spinner</li>
            <li><i class="icon-circle"></i> circle</li>
            <li><i class="icon-reply"></i> reply</li>
            <li><i class="icon-folder-close-alt"></i> folder-close-alt</li>
            <li><i class="icon-folder-open-alt"></i> folder-open-alt</li>
            <li><i class="icon-expand-alt"></i> expand-alt</li>
            <li><i class="icon-collapse-alt"></i> collapse-alt</li>
            <li><i class="icon-smile"></i> smile</li>
            <li><i class="icon-frown"></i> frown</li>
            <li><i class="icon-meh"></i> meh</li>
            <li><i class="icon-gamepad"></i> gamepad</li>
            <li><i class="icon-keyboard"></i> keyboard</li>
            <li><i class="icon-flag-alt"></i> flag-alt</li>
            <li><i class="icon-flag-checkered"></i> flag-checkered</li>
            <li><i class="icon-terminal"></i> terminal</li>
            <li><i class="icon-code"></i> code</li>
            <li><i class="icon-reply-all"></i> reply-all</li>
            <li><i class="icon-star-half-full"></i> star-half-full</li>
            <li><i class="icon-location-arrow"></i> location-arrow</li>
            <li><i class="icon-crop"></i> crop</li>
            <li><i class="icon-code-fork"></i> code-fork</li>
            <li><i class="icon-unlink"></i> unlink</li>
            <li><i class="icon-question"></i> question</li>
            <li><i class="icon-info"></i> info</li>
            <li><i class="icon-shield"></i> shield</li>
            <li><i class="icon-calendar-empty"></i> calendar-empty</li>
            <li><i class="icon-rocket"></i> rocket</li>
            <li><i class="icon-chevron-sign-left"></i> chevron-sign-left</li>
            <li><i class="icon-chevron-sign-right"></i> chevron-sign-right</li>
            <li><i class="icon-chevron-sign-up"></i> chevron-sign-up</li>
            <li><i class="icon-chevron-sign-down"></i> chevron-sign-down</li>
            <li><i class="icon-html5"></i> html5</li>
            <li><i class="icon-anchor"></i> anchor</li>
            <li><i class="icon-unlock-alt"></i> unlock-alt</li>
            <li><i class="icon-bullseye"></i> bullseye</li>
            <li><i class="icon-ellipsis-horizontal"></i> ellipsis-horizontal</li>
            <li><i class="icon-ellipsis-vertical"></i> ellipsis-vertical</li>
            <li><i class="icon-rss-sign"></i> rss-sign</li>
            <li><i class="icon-play-sign"></i> play-sign</li>
            <li><i class="icon-minus-sign-alt"></i> minus-sign-alt</li>
            <li><i class="icon-check-minus"></i> check-minus</li>
            <li><i class="icon-level-up"></i> level-up</li>
            <li><i class="icon-level-down"></i> level-down</li>
            <li><i class="icon-check-sign"></i> check-sign</li>
            <li><i class="icon-edit-sign"></i> edit-sign</li>
            <li><i class="icon-external-link-sign"></i> external-link-sign</li>
            <li><i class="icon-share-sign"></i> share-sign</li>
            <li><i class="icon-compass"></i> compass</li>
            <li><i class="icon-collapse"></i> collapse</li>
            <li><i class="icon-collapse-top"></i> collapse-top</li>
            <li><i class="icon-expand"></i> expand</li>
            <li><i class="icon-dollar"></i> dollar</li>
            <li><i class="icon-yen"></i> yen</li>
            <li><i class="icon-renminbi"></i> renminbi</li>
            <li><i class="icon-file2"></i> file2</li>
            <li><i class="icon-file-text"></i> file-text</li>
            <li><i class="icon-sort-by-alphabet"></i> sort-by-alphabet</li>
            <li><i class="icon-sort-by-alphabet-alt"></i> sort-by-alphabet-alt</li>
            <li><i class="icon-sort-by-attributes"></i> sort-by-attributes</li>
            <li><i class="icon-sort-by-attributes-alt"></i> sort-by-attributes-alt</li>
            <li><i class="icon-sort-by-order"></i> sort-by-order</li>
            <li><i class="icon-sort-by-order-alt"></i> sort-by-order-alt</li>
            <li><i class="icon-thumbs-up2"></i> thumbs-up2</li>
            <li><i class="icon-thumbs-down2"></i> thumbs-down2</li>
            <li><i class="icon-long-arrow-down"></i> long-arrow-down</li>
            <li><i class="icon-long-arrow-up"></i> long-arrow-up</li>
            <li><i class="icon-long-arrow-left"></i> long-arrow-left</li>
            <li><i class="icon-long-arrow-right"></i> long-arrow-right</li>
            <li><i class="icon-apple"></i> apple</li>
            <li><i class="icon-windows"></i> windows</li>
            <li><i class="icon-android"></i> android</li>
            <li><i class="icon-linux"></i> linux</li>
            <li><i class="icon-sun"></i> sun</li>
            <li><i class="icon-moon"></i> moon</li>
            <li><i class="icon-archive"></i> archive</li>
            <li><i class="icon-bug"></i> bug</li>
            <li><i class="icon-weibo"></i> weibo</li>
            <li><i class="icon-renren"></i> renren</li>
            <li><i class="icon-qq"></i> qq</li>
            <li><i class="icon-chrome"></i> chrome</li>
            <li><i class="icon-firefox"></i> firefox</li>
            <li><i class="icon-ie"></i> ie</li>
            <li><i class="icon-opera"></i> opera</li>
            <li><i class="icon-safari"></i> safari</li>
            <li><i class="icon-node"></i> node</li>
            <li><i class="icon-layout"></i> layout</li>
            <li><i class="icon-usecase"></i> usecase</li>
            <li><i class="icon-stack"></i> stack</li>
            <li><i class="icon-branch"></i> branch</li>
            <li><i class="icon-chat"></i> chat</li>
            <li><i class="icon-comment-line"></i> comment-line</li>
            <li><i class="icon-chat-dot"></i> chat-dot</li>
            <li><i class="icon-cube"></i> cube</li>
            <li><i class="icon-align-left"></i> align-left</li>
          </ul>
        </div>
        <p>使用图标字体有一个好处就是图标就是文本字符，所有能用于文本的样式都可以用于图标，这样就可以随意定义图标的大小、颜色，甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式，包含如下内容：</p>
        <ul>
          <li>图标应具备统一的颜色，如果有交互行为样式也应该保持一致；</li>
          <li>图标的大小应该保持一致，正文中的图标大小应为14px，标题中的图标可以为28px；</li>
          <li>图标应与所指示的内容对应，不同地方的同一个指示内容应该使用同一个图标。</li>
        </ul>
        <p>如有需要，也可以自定义专有的图标字体。例如需要使用一些Font Awesome中没有定义的图标，或者由于性能要求太高需要去掉Font Awesome中没有用到的图标。</p>

        <h3>如何使用图标？</h3>
        <p>使用一个单独的<code>&lt;span&gt;</code>标签或者<code>&lt;i&gt;</code>并增加对应的CSS类名即可，用来作为图标的标签不需要包含任何文本也不应该如此。</p>
        <pre class="prettyprint"><code>&lt;i class="icon-star"&gt;&lt;/i&gt;</code></pre>
        <div class="alert alert-danger">
          <p>不要将在任何控件标签上直接应用图标CSS类名，应该嵌套一个单独的<code>&lt;span&gt;</code>标签或者<code>&lt;i&gt;</code>标签。</p>
        </div>

      </section>

      <section id="button">
        <div class="page-header">
          <h2>按钮 </h2>
        </div>
        <p>按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。</p>

        <h3>按钮的类型</h3>
        <p>按钮根据表现形式有如下类型：</p>
        <table class="table">
          <tr>
            <th class="col-md-4">按钮</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><button class="btn btn-primary">主要按钮</button></td>
            <td>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</td>
          </tr>
          <tr>
            <td><button class="btn btn-default">标准按钮</button></td>
            <td>页面上的普通按钮，例如取消表单、重置输入等。</td>
          </tr>
          <tr>
            <td><button class="btn btn-link">链接按钮</button></td>
            <td>链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</td>
          </tr>
          <tr>
            <td>
              <div class="btn-group">
                <button class="btn btn-default">按钮组</button>
                <button class="btn btn-default">第二个</button>
                <button class="btn btn-default">第三个</button>
              </div>
            </td>
            <td>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。</td>
          </tr>
        </table>

        <h3>按钮的大小</h3>
        <table class="table">
          <tr>
            <th class="col-md-6">实例</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <button class="btn btn-lg btn-primary" type="button">较大的按钮</button>
              <button class="btn btn-lg" type="button">较大的按钮</button>
            </td>
            <td>较大的按钮，通常用在英雄页面或者大屏幕中。</td>
          </tr>
          <tr>
            <td>
              <button class="btn btn-primary" type="button">默认大小</button>
              <button class="btn btn-default" type="button">默认大小</button>
            </td>
            <td>默认大小</td>
          </tr>
          <tr>
            <td>
              <button class="btn btn-sm btn-primary" type="button">较小的按钮</button>
              <button class="btn btn-sm" type="button">较小的按钮</button>
            </td>
            <td>较小的按钮</td>
          </tr>
          <tr>
            <td>
              <button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
              <button class="btn btn-mini" type="button">迷你按钮</button>
            </td>
            <td></td>
          </tr>
          <tr>
            <td>
              <button class="btn btn-large btn-block btn-primary" type="button">块状按钮</button>
              <button class="btn btn-large btn-block btn-default" type="button">块状按钮</button>
            </td>
            <td>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</td>
          </tr>
        </table>
        <h3>按钮的不同状态</h3>
        <table class="table">
          <tr>
            <th class="col-md-4">实例</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <button class="btn btn-default"><i class="icon-edit"></i> 带图标的按钮</button>
            </td>
            <td>在按钮上使用图标有时能起到点睛之笔的效果。</td>
          </tr>
          <tr>
            <td>
              <button type="button" class="btn btn-primary active" data-toggle="button">状态切换按钮</button>
            </td>
            <td>
              状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态，再次点击取消选中状态。
            </td>
          </tr>
          <tr>
            <td>
              <div class="btn-group" data-toggle="buttons-checkbox">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
              </div>
            </td>
            <td>当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件（复选框）。</td>
          </tr>
          <tr>
            <td>
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
              </div>
            </td>
            <td>当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。</td>
          </tr>
          <tr>
            <td>
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default"><i class="icon-star"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-heart"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-heart-empty"></i></button>
              </div>
            </td>
            <td>在互斥的状态切换组中使用图标更加简洁明了。</td>
          </tr>
          <tr>
            <td>
              <button type="button" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button>
            </td>
            <td>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换"正在加载"，直至操作完成。</td>
          </tr>
          <tr>
            <td>
              <a href="#" class="btn btn-primary disabled">已禁用的操作</a>
              <a href="#" class="btn disabled">禁用的操作</a>
            </td>
            <td>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</td>
          </tr>
        </table>

        <h3>按钮的颜色</h3>
        <p>按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确，与用户期望一致。</p>
        <table class="table">
          <tr>
            <th class="col-md-3">实例</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-default">默认</button></td>
            <td>带渐变的标准灰色按钮</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-primary">主要</button></td>
            <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-info">信息</button></td>
            <td>默认样式的替代样式</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-success">成功</button></td>
            <td>表示成功或积极的动作</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-warning">警告</button></td>
            <td>提醒应该谨慎采取这个动作</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-danger">危险</button></td>
            <td>表示这个动作危险或存在危险</td>
          </tr>
        </table>
      </section>

      <section id='progressbar'>
        <div class="page-header"><h2 id="progress">进度条</h2></div>
        <p class="lead">提供工作或动作的实时反馈，只用简单且灵活的进度条。</p>
        <p>进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持animation属性。 </p>

        <h3>类型</h3>
        <h4>基本类型</h4>
        <table class="table col-md-12" style='text-align:center'>
          <tr>
            <th width='40%'>进度条</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>默认的进度条</td>
          </tr>
        </table>

        <h3>变化</h3>
        <h4>颜色</h4>
        <p>为了一致的样式，进度条颜色使用与按钮相同的类。</p>
        <table class="table col-md-12"  style='text-align:center'>
          <tr>
            <th width='40%'>进度条</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>主要/默认</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>信息</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>成功</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                  <span class="sr-only">60% Complete (warning)</span>
                </div>
              </div>
            </td>
            <td>警告</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                <span class="sr-only">80% Complete (danger)</span>
                </div>
              </div>
            </td>
            <td>危险</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>成功</td>
          </tr>
        </table>

        <h4>效果</h4>
        <p>用一个渐变可以创建条纹效果，在IE8中不可用。</p>
        <table class="table col-md-12" style='text-align:center'>
          <tr>
            <th width='40%'>进度条</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <div class="progress progress-striped" >
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>条纹效果</td>
          </tr>
          <tr>
            <td>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                  <span class="sr-only">45% Complete</span>
                </div>
              </div>
            </td>
            <td><p>运动效果。给<code>.progress-striped</code>加上<code>.active</code>使它由右向左运动。在IE的所有版本不可用。</p></td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-success" style="width: 35%">
                  <span class="sr-only">35% Complete (success)</span>
                </div>
                <div class="progress-bar progress-bar-warning" style="width: 20%">
                  <span class="sr-only">20% Complete (warning)</span>
                </div>
                <div class="progress-bar progress-bar-danger" style="width: 10%">
                  <span class="sr-only">10% Complete (danger)</span>
                </div>
              </div>
            </td>
            <td><p>堆叠效果。把多个进度条放入同一个<code>.progress</code>，使它们堆叠。</p></td>
          </tr>
        </table>
      </section>

      <section id='labels'>
        <div class="page-header"><h2 id="labels">标签 </h2></div>

        <h3>基本样式</h3>
        <table class="table" style='text-align:center'>
          <tr>
            <th width='200px'>标签</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><h1><span class="label">New</span></h1></td>
            <td>h1</td>
          </tr>
          <tr>
            <td><h2><span class="label">New</span></h2></td>
            <td>h2</td>
          </tr>
          <tr>
            <td><h3><span class="label">New</span></h3></td>
            <td>h3</td>
          </tr>
          <tr>
            <td><h4><span class="label">New</span></h4></td>
            <td>h4</td>
          </tr>
          <tr>
            <td><h5><span class="label">New</span></h5></td>
            <td>h5</td>
          </tr>
          <tr>
            <td><h6><span class="label">New</span></h6></td>
            <td>h6</td>
          </tr>
        </table>

        <h3>徽标</h3>
        <p><code>.label-badge</code></p>
        <div class='example' contenteditable="true">
          <span class="label label-badge">12</span>
          <span class="label label-badge label-primary">Primary</span>
          <span class="label label-badge label-success">Success</span>
          <span class="label label-badge label-info">Info</span>
          <span class="label label-badge label-warning">Warning</span>
          <span class="label label-badge label-danger">Danger</span>
        </div>
        <p>小圆点徽标</p>
        <div class='example' contenteditable="true">
          <span class="label label-dot">12</span>
          <span class="label label-dot label-primary"></span>
          <span class="label label-dot label-success"></span>
          <span class="label label-dot label-info">Info</span>
          <span class="label label-dot label-warning">Warning</span>
          <span class="label label-dot label-danger">Danger</span>
        </div>

        <p>按钮中的徽标</p>
        <div class='example' contenteditable="true">
          <button class="btn">列表 <span class="label label-badge">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-primary">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-success">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-info">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-warning">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-danger">12</span></button>
          <br><br>
          <button class="btn btn-primary">联系人 <span class="label label-badge">12</span></button>
          <button class="btn btn-success">联系人 <span class="label label-badge">12</span></button>
          <button class="btn btn-info">联系人 <span class="label label-badge">12</span></button>
          <button class="btn btn-warning">联系人 <span class="label label-badge">12</span></button>
          <button class="btn btn-danger">联系人 <span class="label label-badge">12</span></button>
          <br><br>
          <button class="btn">列表 <span class="label label-dot">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-primary">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-success">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-info">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-warning">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-danger">12</span></button>
          <br><br>
          <button class="btn btn-primary">联系人 <span class="label label-dot">12</span></button>
          <button class="btn btn-success">联系人 <span class="label label-dot">12</span></button>
          <button class="btn btn-info">联系人 <span class="label label-dot">12</span></button>
          <button class="btn btn-warning">联系人 <span class="label label-dot">12</span></button>
          <button class="btn btn-danger">联系人 <span class="label label-dot">12</span></button>
        </div>

        <p>列表组中的徽标和标签</p>
        <div class='example' contenteditable="true">
          <div class="list-group">
            <a href="#" class="list-group-item">用div &gt; a实现，实现整行点击 <span class="label label-primary">Primary</span></a>
            <a href="#" class="list-group-item">todo </a>
            <a href="#" class="list-group-item">story <span class="label label-badge label-primary">Primary</span></a>
            <a href="#" class="list-group-item active">task active <span class="label label-dot"></span></a>
            <a href="#" class="list-group-item">bug <span class="label label-badge label-warning">Warning</span></a>
            <a href="#" class="list-group-item">case <span class="label label-dot label-danger"></span><span class="label label-badge label-danger pull-right">123</span></a>
          </div>
        </div>

        <h3>标签和徽标的颜色</h3>
        <table class="table" style='text-align:left'>
          <tr>
            <th width='200px'>标签</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><span class="label">Default</span></td>
            <td><code>.label-default</code></td>
          </tr>
          <tr>
            <td><span class="label label-primary">Primary</span></td>
            <td><code>.label-primary</code></td>
          </tr>
          <tr>
            <td><span class="label label-success">Success</span></td>
            <td><code>.label-success</code></td>
          </tr>
          <tr>
            <td><span class="label label-info">Info</span></td>
            <td><code>.label-info</code></td>
          </tr>
          <tr>
            <td><span class="label label-warning">Warning</span></td>
            <td><code>.label-warning</code></td>
          </tr>
          <tr>
            <td><span class="label label-danger">Danger</span></td>
            <td><code>.label-danger</code></td>
          </tr>
        </table>
      </section>

      <section id='textbox' data-id="forms.basic">
        <div class="page-header"><h2>文本框  </h2></div>

        <h3>类型</h3>
        <h4>基本类型</h4>
        <table class="table">
          <tr>
            <th width='200px'>文本框</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><input type="email" class='form-control'placeholder="Enter email"></td>
            <td>input type='email'</td>
          </tr>
          <tr>
            <td><input type="text" class='form-control' placeholder="Text input"></td>
            <td>input type='text'</td>
          </tr>
          <tr>
            <td><input type="checkbox" value=""></td>
            <td>input type='checkbox'</td>
          </tr>
          <tr>
            <td><input type="radio" checked></td>
            <td>input type='radio''</td>
          </tr>
          <tr>
            <td><textarea class='form-control' rows="3"></textarea></td>
            <td>textarea row='3'</td>
          </tr>
          <tr>
            <td><input type="file" value=""></td>
            <td>file</td>
          </tr>
          <tr>
            <td>
              <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </td>
            <td>select </td>
          </tr>
        </table>


        <h3>状态</h3>
        <table class="table">
          <tr>
            <th width='200px'>文本框</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><input class="form-control"  type="text" placeholder="Disabled input here..." disabled><br /></td>
            <td>禁用：input type='text' diabled</td>
          </tr>
          <tr>
            <td><input class="form-control form-focus"  type="text" placeholder="Focused input here..."><br /></td>
            <td>焦点：input type='text' class='form-focus'</td>
          </tr>
          <tr>
            <td>
              <div class='has-warning'>
                <input class="form-control" type="text" placeholder="Has warnig input here...">
              </div><br />
            </td>
            <td>has-warning</td>
          </tr>
          <tr>
            <td>
              <div class='has-error'>
                <input class="form-control"   type="text" placeholder="Has error input here...">
              </div><br />
            </td>
            <td>has-error</td>
          </tr>
          <tr>
            <td>
              <div class='has-success'>
                <input class="form-control" type="text" placeholder="Has success input here...">
              </div><br />
            </td>
            <td>has-success</td>
          </tr>
        </table>

        <h3>变化</h3>
        <h4>高度</h4>
        <table class="table">
          <tr>
            <th width='200px'>文本框</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><input class="form-control input-lg" type="text" placeholder=".input-lg"></td>
            <td>.input-lg</td>
          </tr>
          <tr>
            <td><input class="form-control" type="text" placeholder="Default input"></td>
            <td>Default iinput</td>
          </tr>
          <tr>
            <td><input class="form-control input-sm" type="text" placeholder=".input-sm"></td>
            <td>.input-sm</td>
          </tr>
        </table>

        <h4>宽度</h4>
        <div class="row">
          <div class="col-xs-2">
            <input type="text" class="form-control" placeholder=".col-xs-2">
          </div>
          <div class="col-xs-3">
            <input type="text" class="form-control" placeholder=".col-xs-3">
          </div>
          <div class="col-xs-4">
            <input type="text" class="form-control" placeholder=".col-xs-4">
          </div>
        </div>
      </section>

      <section id='breadcrumb' data-id="breadcrumbs">
        <div class="page-header">
          <h2>面包屑  </h2>
        </div>
        <ul class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
      </section>

      <section id="images" data-id="image">
        <div class="page-header">
          <h2>图片  </h2>
        </div>
        <h3>类型</h3>
        <h4>圆角图片</h4>
        <p><code>.img-rounded</code></p>
        <div class="example"><img src="img/img2.jpg" width="200px" height="200px" class='img-rounded' alt=""></div>
        <h4>圆形图片</h4>
        <p><code>.img-circle</code></p>
        <div class="example"><img src="img/img2.jpg" width="200px" height="200px" class='img-circle' alt=""></div>
        <h4>缩略图</h4>
        <p><code>.img-thumbnail</code></p>
        <div class="example"><img src="img/img2.jpg" width="200px" height="200px" class='img-thumbnail' alt=""></div>
        <h3>参数</h3>
        <h4>响应式图片</h4>
        <p>图片最大宽度将不会超过父级容器。<code>.img-responsive</code></p>
        <div class="example">
           <div class='panel' style='width: 250px;'><img src="img/img2.jpg" class='img-responsive' alt=""></div>
        </div>
      </section>

      <section id="headers" data-id="header">
        <div class="page-header">
          <h2>标题  </h2>
        </div>
        <h3>类型</h3>
        <h4>标准内容标题</h4>
        <p>内容标题用来对一段内容进行总结。内容标题有1-6个级别，用html中的<code>h1</code>、<code>h2</code>...<code>h6</code>来应用样式</p>
        <table class="table">
          <thead>
            <tr>
              <th style="width:30%">元素</th>
              <th>标签</th>
              <th>像素大小</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <h1>Heading1 一级标题</h1>
              </td>
              <td><code>&lt;h1&gt;</code></td>
              <td>28px</td>
              <td>在一个页面（或在<code>hgroup</code>标记的范围内）只有一个页面标题。</td>
            </tr>
            <tr>
              <td><h2>Heading2 二级标题</h2></td>
              <td><code>&lt;h2&gt;</code></td>
              <td>24px</td>
              <td>作为页面第二级标题，可能在一个页面中使用到多个二级标题。</td>
            </tr>
            <tr>
              <td><h3>Heading3 三级标题</h3></td>
              <td><code>&lt;h3&gt;</code></td>
              <td>20px 粗体</td>
              <td>页面第三级标题，嵌套在二级标题下使用。</td>
            </tr>
            <tr>
              <td><h4>Heading4 四级标题</h4></td>
              <td><code>&lt;h4&gt;</code></td>
              <td>16px 粗体</td>
              <td>页面第四级标题，嵌套在三级标题下使用。</td>
            </tr>
            <tr>
              <td><h5>Heading5 五级标题</h5></td>
              <td><code>&lt;h5&gt;</code></td>
              <td>14px 粗体 颜色灰色</td>
              <td>页面第五级标题，嵌套在四级标题下使用。</td>
            </tr>
            <tr>
              <td><h6>Heading6 六级标题</h6></td>
              <td><code>&lt;h6&gt;</code></td>
              <td>12px 粗体 颜色灰色</td>
              <td>页面第六级标题，嵌套在五级标题下使用。</td>
            </tr>
              </tbody>
        </table>

        <h4>带额外内容的标题</h4>
        <p>标题中可以加入解释性的文本，这些文本通过一个<code>small</code>标签加入。</p>
        <div class="example" contenteditable="true">
          <h1>Heading1 标题1 <small>额外的标题 secondary headings</small></h1>
          <h2>Heading2 标题2 <small>额外的标题 secondary headings</small></h2>
          <h3>Heading3 标题3 <small>额外的标题 secondary headings</small></h3>
          <h4>Heading4 标题4 <small>额外的标题 secondary headings</small></h4>
          <h5>Heading5 标题5 <small>额外的标题 secondary headings</small></h5>
          <h6>Heading6 标题6 <small>额外的标题 secondary headings</small></h6>
        </div>

        <h4>单独一行的解释性文本</h4>
        <div class="example" contenteditable="true">
          <h2>Heading1 标题1 <small class="block">这是关于标题的解释性文本 secondary headings</small></h2>
        </div>

        <h4>带图标的标题</h4>
        <p>页面标题使用额外的<code>div.header</code>来为页面内容提供更多的样式控制，与其他控件完美整合在一起。</p>
        <div class="example" contenteditable="true">
          <h2><i class="icon icon-film"></i> 带图标的标题</h2>
        </div>

        <h3>参数</h3>

        <h4><code>.header-block</code></h4>
        <p>带背景颜色的标题。</p>
        <div class="example" contenteditable="true">
          <h3 class="header-block">标题</h3>
        </div>

        <h4><code>.header-dividing</code></h4>
        <p>带底部水平分隔线的标题</p>
        <div class="example" contenteditable="true">
          <h3 class="header-dividing">标题</h3>
        </div>
      </section>

      <section id="dividers" data-id="divider">
        <div class="page-header">
           <h2>分隔线  </h2>
        </div>

        <h3>类型</h3>
        <h4>水平分隔线</h4>
        <div class="example" contenteditable="true">
          <hr>
        </div>
      </section>

    </div>

    <script src="../assets/jquery.js"></script>
    <script src="../dist/js/zui.min.js"></script>
    <script src="../assets/google-code-prettify/prettify.js"></script>
    <script src="js/doc.js"></script>

  <script src="http://s95.cnzz.com/stat.php?id=1253026255&web_id=1253026255"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53781622-1', 'auto');
  ga('send', 'pageview');
</script>
  </body>
</html>
